<template>
  <div v-if="themeStore.currentLayout === 'siderMode'">
    <div
      class="logo"
      :class="{ collapse: collapsedStore.collapsed ? true : false }"
      :style="{ color: themeStore.isBusiness ? '#fff' : '' }"
    >
      <svg-icon
        v-if="!setting.logoHidden"
        name="logo"
        width="34px"
        height="34px"
      />
      <svg-icon
        v-if="collapsedStore.collapsed"
        name="logo"
        width="34px"
        height="34px"
      />
      <span class="logo_title" v-if="!collapsedStore.collapsed">{{
        setting.title
      }}</span>
    </div>
  </div>

  <div v-else-if="themeStore.currentLayout === 'topMode'">
    <div
      class="top-logo"
      :class="{ collapse: collapsedStore.collapsed ? true : false }"
      :style="{
        background: themeStore.isBusiness ? '#001529' : '',
        color: themeStore.isBusiness ? '#fff' : '',
      }"
    >
      <svg-icon name="logo" width="34px" height="34px" />
      <span class="top-logo_title" v-if="!collapsedStore.collapsed">{{
        setting.title
      }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useCollapsedStore } from "@/stores/models/collapsed";
import { useThemeStore } from "@/stores/models/theme";
import setting from "@/setting";

const themeStore = useThemeStore();
const collapsedStore = useCollapsedStore();
</script>
<style scoped lang='scss'>
.logo {
  height: $base-header-height;
  width: $base-logo-width;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  overflow: hidden;

  // 左侧菜单收缩样式
  &.collapse {
    width: $base-logo-collapse-width;
  }

  .logo_title {
    flex-shrink: 0;
    margin-left: 8px;
  }
}

.top-logo {
  height: $base-header-height;
  width: $base-topMode-left-width;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  overflow: hidden;
  padding-left: 20px;

  .top-logo_title {
    flex-shrink: 0;
    margin-left: 14px;
  }
}
</style>